<template>
  <div>
    <MyHeader title="购物车" bgc="orange" color="black"></MyHeader>
    <div class="main">
      <!-- MyGoods代表每一条商品信息，因此得v-for这个商品组件 -->
      <MyGoods v-for="obj in list" :key="obj.id" :obj="obj"></MyGoods>
    </div>
    <!-- 将list传给底部组件 -->
    <MyFooter :list="list"></MyFooter>
  </div>
</template>
 
<script>
// 引入组件
import MyHeader from '@/components/MyHeader'
import MyGoods from '@/components/MyGoods'
import MyFooter from '@/components/MyFooter'
export default {
  components: {
    // 注册组件
    MyHeader,
    MyGoods,
    MyFooter
  },
  data() {
    return {
      list: []
    }
  },
  created(){
    this.$axios({
      url: '/api/cart'
    }).then(res => {
      // 将请求到的商品数据给到list数组
      this.list = res.data.list
    })
  },
  methods: {}
}
</script>

<style scoped>
.main {
  margin-top: 45px;
  margin-bottom: 51px;
}
</style>